<template>
  <div class="note"
       :style="note">
    <el-form  autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
      <div class="bg1"></div>
      <div class="gyl">

      </div>
      <div class="bg">
        <div class="user">
          <div class="yonghu">用户名</div>
          <el-form-item prop="username">
            <el-input class="yh"  size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">
            </el-input>
          </el-form-item>
        </div>
        <div class="password">
          <div class="yonghu">密&nbsp;&nbsp;&nbsp;码</div>
          <el-input class="yh" size="small" @keyup.enter.native="handleLogin" :type="pwdType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
          </el-input>
        </div>
        <div class="yz">
          <!-- <div class="yonghu">验证码</div>
          <el-form-item label="" prop="verifyCode">
            <el-input
              v-model="loginForm.verifyKey"
              placeholder="验证码"
              prefix-icon=""
              autocomplete="off"
              autocapitalize="off"
              spellcheck="false"
              maxlength="4"
              @keyup.enter.native="handleLogin"
              style="float: left; width: 145px;left: 10px;"
            ></el-input>
            <div class="captcha_code">
              <img src="" ref="code" @click="changeCode"  style="margin-left: 20px;cursor: pointer;width: 95px;position: absolute;top: 0px;height: 40px;" >
            </div>
          </el-form-item> -->
        </div>
        <el-form-item>
          <el-button type="primary" class="btn" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
        </el-form-item>
      </div>
      <div class="cp"></div>

      <!--      <div class="formGroup">-->
      <!--        <el-form-item prop="username">-->
      <!--          <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">-->
      <!--            <svg-icon slot="prefix" icon-class="account"></svg-icon>-->

      <!--          </el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item prop="password">-->
      <!--          <el-input size="small" @keyup.enter.native="handleLogin" :type="pwdType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">-->
      <!--            <i class="el-icon-view el-input__icon" slot="suffix" @click="showPwd"></i>-->
      <!--            <svg-icon slot="prefix" icon-class="password"></svg-icon>-->
      <!--          </el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="" prop="verifyCode">-->
      <!--          <el-input-->
      <!--            v-model="loginForm.verifyKey"-->
      <!--            placeholder="验证码"-->
      <!--            prefix-icon=""-->
      <!--            autocomplete="off"-->
      <!--            autocapitalize="off"-->
      <!--            spellcheck="false"-->
      <!--            maxlength="4"-->
      <!--            @keyup.enter.native="handleLogin"-->
      <!--            style="float: left; width: 122px;"-->
      <!--          ></el-input>-->
      <!--          <div class="captcha_code">-->
      <!--            <img src="" ref="code" @click="changeCode"  style="margin-left: 10px;margin-top: 4px;cursor: pointer;" >-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--&lt;!&ndash;        <div class="remFor">&ndash;&gt;-->
      <!--&lt;!&ndash;          <a href="'https://blog.csdn.net/Vanadis_outlook/article/details/72823024.html'" class="forget">忘记密码？</a>&ndash;&gt;-->
      <!--&lt;!&ndash;        </div>&ndash;&gt;-->

      <!--        <div class="formButton">-->
      <!--          <el-form-item style="width:100%;">-->
      <!--            <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>-->
      <!--          </el-form-item>-->
      <!--        </div>-->

      <!--      </div>-->
    </el-form>
  </div>
</template>

<script>
  import { DEFAULT_PUBLICKEY } from '../../utils/util'
  import JsEncrypt from 'jsencrypt/bin/jsencrypt'
  export default {
    name: 'login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value.length === 0) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      const validatePass = (rule, value, callback) => {
        if (value.length < 5) {
          callback(new Error('密码不能小于5位'))
        } else {
          callback()
        }
      }
      const validateCaptchaCode = (rule, value, callback) => {
        // if (value.length === 0) {
        //   callback(new Error('验证码不能为空'))
        // } else {
        //   callback()
        // }
      }
      return {
        encryptLoginForm: {
          username: '',
          password: '',
          verifyCode: '',
          verifyKey: ''
        },
        loginForm: {
          username: '',
          password: '',
          verifyCode: '',
          verifyKey: ''
        },
        loginRules: {
          username: [{
            required: true,
            trigger: 'blur',
            validator: validateUsername
          }],
          password: [{
            required: true,
            trigger: 'blur',
            validator: validatePass
          }],
        },
        loading: false,
        pwdType: 'password',
        note: {
          position: 'absolute',
          top: '0px',
          left: '0px',
          width: '100%',
          height: '100%',
          backgroundImage: 'url(' + require('../../assets/68.png') + ')',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat'

        }
      }
    },
    mounted() {
      this.changeCode()
    },
    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      encryptLoginFormData() {
        var encrypt = new JsEncrypt()
        encrypt.setPublicKey(DEFAULT_PUBLICKEY)
        this.encryptLoginForm.username = encrypt.encrypt(this.loginForm.username)
        this.encryptLoginForm.password = encrypt.encrypt(this.loginForm.password)
        this.encryptLoginForm.verifyCode = encrypt.encrypt(this.loginForm.verifyCode+'')
        this.encryptLoginForm.verifyKey = encrypt.encrypt(this.loginForm.verifyKey)
      },
      handleLogin() {
        var that = this
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = false
            // that.encryptLoginFormData()
              that.$router.push({
                path: '/'
              })
            // this.$store.dispatch('Login', that.encryptLoginForm).then(() => {
            //   this.loading = false
            //   this.$router.push({
            //     path: '/'
            //   })
            // }).catch(() => {
            //   this.loginForm = {
            //     username: '',
            //     password: '',
            //     verifyKey: ''
            //   }
            //   this.changeCode()
            //   this.$message({
            //     message: '账号密码或验证码错误!',
            //     type: 'warning'
            //   })
            //   this.loading = false
            // })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      changeCode() {
        this.loginForm.verifyCode = Math.random()
        if (this.$refs.code != null) {
          this.$refs.code.setAttribute('src', process.env.BASE_API + '/getVerifyCode?verifyCode=' + this.loginForm.verifyCode)
        }
      }
    }
  }

</script>
<style lang="stylus" scoped>
  @import  "../../styles/ht.css";
</style>
